import {
  userBehavior
} from '@/behaviors/userBehavior'
import {
  swipeCellBehavior
} from '@/behaviors/swipeCell'
import {
  reqCartList,
  reqUpdateChecked,
  reqCheckedAll,
  reqDelCartGoods
} from '@/api/cart'
import {
  toast,
  modal
} from '@/utils/extendApi'
import {
  ComponentWithStore
} from 'mobx-miniprogram-bindings'
const computedBehavior = require('miniprogram-computed').behavior
// 从 miniprogram-licia 导入防抖函数
import {
  debounce
} from 'miniprogram-licia'
ComponentWithStore({
  behaviors: [userBehavior, computedBehavior, swipeCellBehavior],
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },
  computed: {
    // 判断是否全选
    //computes函数中不能访问this,只有data对象可供访问
    // 这个函数的返回值会被设置到this.data.allStatus字段中
    selectAllStatus(data) {
      return data.cartList.length !== 0 && data.cartList.every((item) => item.isChecked == 1)
    },
    //计算商品价格总和
    totalPrice(data) {
      let totalPrice = 0
      data.cartList.forEach((item) => {
        if (item.isChecked == 1) {
          totalPrice += item.price * item.count
        }
      })
      return totalPrice
    }
  },
  methods: {
    //跳转到订单页面
    clickSubmit() {
      const {
        totalPrice
      } = this.data
      //如果没有登录
      if (totalPrice == 0) {
        toast({
          title: '请选择需要购买的商品'
        })
        return
      }
      // 跳转到订单的结算页面
      wx.navigateTo({
        url: '/modules/orderPayModule/pages/order/detail/detail'
      })
    },
    onShow() {
      this.showTipGetList()
    },
    // // 实现全选和全不选效果正常写法
    // async selectAllStatus(event) {
    //   // 获取全选按钮的选中状态
    //   const { detail } = event
    //   // 需要将选中的状态转换后接口需要使用的数据
    //   const isChecked = detail ? 1 : 0

    //   // 调用接口，实现全选和全不选功能
    //   const res = await reqCheckAllStatus(isChecked)

    //   if (res.code === 200) {
    //     // this.showTipGetList()

    //     // 对购物车列表数据进行深拷贝
    //     const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
    //     newCartList.forEach((item) => (item.isChecked = isChecked))

    //     // 对 cartList 进行赋值，驱动视图更新
    //     this.setData({
    //       cartList: newCartList
    //     })
    //   }
    // },
    //点击全选的事件 mock写法
    async selectAllStatus(event) {
      // 获取全选和全不选的状态
      const isChecked = event.detail ? 1 : 0
      // 将数据进行拷贝
      const newCart = JSON.parse(JSON.stringify(this.data.cartList))
      //将数组进行更改
      newCart.forEach(async (item) => {
        item.isChecked = isChecked
        let res = await reqUpdateChecked(item.id, item)
        //更新成功，需要将本地的数据一同改变
        if (res.code == 200 || res.code == 201) {
          //进行赋值
          this.setData({
            cartList: newCart
          })
        }
      })



    },
    //处理页面的展示
    async showTipGetList() {
      const {
        token,
        cartList
      } = this.data
      //如果没有登录
      if (!token) {
        return this.setData({
          cartList: [],
          emptyDes: '您尚未登录，点击获取更多权益'
        })
      }
      //获取商品列表数据
      let res = await reqCartList()
      if (res.code == 200 || res.code == 201) {
        this.setData({
          cartList: res.data,
          emptyDes: res.data.length == 0 ? '还没有添加商品，快去添加吧~' : ''
        })
      }
    },
    //选中取消选中
    async updateChecked(event) {
      const {
        detail
      } = event
      let {
        goods,
        index
      } = event.target.dataset
      // 将最新的状态格式化成后端所需的数据格式
      const isChecked = detail ? 1 : 0
      //由于是mock所有把整体data组织一下，正式接口只需要goodsId,isChecked
      let data = {
        ...goods,
        isChecked: isChecked
      }
      //调用接口，更新商品的状态
      const res = await reqUpdateChecked(goods.id, data)
      //如果数据更新成功，需要将本地数据一同改变
      if (res.code == 200 || res.code == 201) {
        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }
    },
    changeBuyNum: debounce(async function (event) {
      const newBuyNum = event.detail > 200 ? 200 : event.detail
      const {
        goods,
        index,
        oldbuynum
      } = event.target.dataset
      // 使用正则验证用户输入的购买数量，是否是 1-200 之间的正整数
      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
      // 对用户输入的值进行验证，验证通过 true，验证失败 false
      const regRes = reg.test(goods.count)
      // 如果验证没有通过，说明用户输入的购买数量不合法或者小于 1，需要还原为之前的购买数量
      if (!regRes) {
        this.setData({
          [`cartList[${index}].count`]: oldbuynum
        })
        // 如果验证没有通过，需要阻止代码继续往下运行
        return
      }
      let data = {
        ...goods,
        count: newBuyNum
      }
      //购买数量发生变化，调用接口
      const res = await reqUpdateChecked(goods.id, data)
      if (res.code == 200 || res.code == 201) {
        this.setData({
          [`cartList[${index}].count`]: newBuyNum,
          [`cartList[${index}].isChecked`]: 1,
        })
      }
    }, 500),
    // 删除商品
    async changeDel(event) {
      let {
        id
      } = event.target.dataset
      //询问用户是否确认删除
      const modalRes = await modal({
        content: '您确认删除该商品吗？'
      })
      if (modalRes) {
        let res = await reqDelCartGoods(id)
        if (res.code == 200 || res.code == 201) {
          toast({
            title: '删除成功'
          })
          this.showTipGetList()
        }
      }

    },
    onHide() {
      // 在页面隐藏的时候，需要让删除滑块自动弹回
      this.onSwipeCellCommonClick()
    }
  },

})